<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id='app'>
        <input ref="refname" type="text">
        <button @click="getClick">点击获取输入内容</button>

        <ul>
            <!-- 一个 ref 可以给多个标签使用，ref 用来获取 DOM 的方法 -->
            <li v-for="item in 5" ref="abc" :key="item">{{item}}</li>
        </ul>
    </div>
</body>
<script>
    const app = {
        data() {
            return {}
        },
        methods: {
            getClick() {
                // console.log(document.querySelector('input').value);
                // console.log(this.$refs.refname.value);
                console.log(this.$refs);
            }
        },
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>